<template>
  <div class="stores_management">
    <!-- 页面主体 -->
    <div class="tab-view data-view">
      <div class="panel-title clearfix">
        <div class="search_box">
          <el-input placeholder="请输入门店名搜索" v-model="queryShop" class="input-with-select" size="mini"
            @change="searchShop">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="panel-table">
        <el-table :data="accountTableData"
                  size="small"
                  empty-text="没有对应数据"
                  highlight-current-row
                  style="width: 100%">
          <el-table-column prop="name"
                           label="门店名称"
                           align="left"
                           :resizable = "false"
                           width="180">
          </el-table-column>
          <el-table-column prop="address"
                           align="left"
                           :resizable = "false"
                           label="门店地址">
            <template slot-scope="scope">{{ scope.row.address !== null && scope.row.address !== undefined ? scope.row.address : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column prop="area"
                           align="left"
                           :resizable = "false"
                           label="门店面积">
            <template slot-scope="scope">{{ scope.row.area !== null && scope.row.area !== undefined ? scope.row.area : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column prop="contact"
                           align="left"
                           :resizable = "false"
                           label="店长">
            <template slot-scope="scope">{{ scope.row.contact !== null && scope.row.contact !== undefined ? scope.row.contact : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column prop="contact_phone"
                           align="left"
                           :resizable = "false"
                           label="联系电话">
            <template slot-scope="scope">{{ scope.row.contact_phone !== null && scope.row.contact_phone !== undefined ? scope.row.contact_phone : '暂无数据' }}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination  @current-change="changePage"
                        :current-page="currentPage"
                        :page-sizes="[20]"
                        :page-size="20"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">

import { mapGetters } from 'vuex'

// element-ui
import { Table, TableColumn, Input, Pagination, Button } from 'element-ui'

// api
import { APIGetShopListData } from '@/api/settings.js'

export default {
  name: 'StoresTab',

  components: {
    // elementUI component
    elTable: Table,
    elTableColumn: TableColumn,
    elInput: Input,
    elPagination: Pagination,
    elButton: Button
  },

  created () {
    // init request
    this.APIGetShopListData()
  },

  data () {
    return {
      queryShop: '',
      queryChange: '',
      currentPage: 1,
      accountTableData: [],
      total: null
    }
  },

  computed: {
    ...mapGetters([
      'mallId',
      'token'
    ])
  },
  methods: {
    // 根据条件查询shop
    searchShop () {
      this.APIGetShopListData(this.queryShop)
    },
    changePage (value) {
      // this.APIGetShopListData(this.queryShop)
    },
    // ======= API ==================
    APIGetShopListData (keyWord, page, pageSize) {
      APIGetShopListData({ keyWord, page, pageSize })
        .then((res) => {
          this.accountTableData = res.data.shops.data
          this.total = res.data.shops.total
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .stores_management{
    .tab-view {
      .panel-title {
        .search_box{
          float: right;
          width: 200px;
          font-size: 16px;
        }
      }
      .panel-charts {
        padding: 20px 0;
        width: 100%;
        height: 350px;
      }
      .panel-table {
        padding: 10px 0;
        width: 100%;
      }
      .page {
        text-align: right;
      }
    }
  }
</style>
